
.item span:nth-of-type(1) {
  position: absolute;
  left: -100%;
  width: 100%;
  height: 3px;
  background-image: linear-gradient(to left, aqua, transparent);
  animation: btnanmaiton 1s linear infinite;
}

@keyframes btnanmaiton {
  0% {
    left: -100%;
  }
  50%,
  100% {
    left: 100%;
  }
}

.item span:nth-of-type(2) {
  position: absolute;
  top: -100%;
  right: 0;
  width: 3px;
  height: 100%;
  background-image: linear-gradient(to top, aqua, transparent);
  animation: two 1s linear infinite;
  animation-delay: 0.25s;
}

@keyframes two {
  0% {
    top: -100%;
  }
  50%,
  100% {
    top: 100%;
  }
}

.item span:nth-of-type(3) {
  position: absolute;
  right: -100%;
  bottom: 0;
  width: 100%;
  height: 3px;
  background-image: linear-gradient(to right, aqua, transparent);
  animation: three 1s linear infinite;
  animation-delay: 0.5s;
}

@keyframes three {
  0% {
    right: -100%;
  }
  50%,
  100% {
    right: 100%;
  }
}

.item span:nth-of-type(4) {
  position: absolute;
  bottom: -100%;
  left: 0;
  width: 3px;
  height: 100%;
  background-image: linear-gradient(to bottom, aqua, transparent);
  animation: zuo 1s linear infinite;
  animation-delay: 0.75s;
}

@keyframes zuo {
  0% {
    bottom: -100%;
  }
  50%,
  100% {
    bottom: 100%;
  }
}
